<template>
	<view class="pages-row">
		<view class="cardf">
			<view class="ava-box">
				<text>头像</text>
				<view class="avator" @click="uploadFiles">
					<image :src="userInfo.portrait ? userInfo.portrait : '../../static/image/user_icon.png'"></image>
				</view>
			</view>
			<view class="set-bots">
				<text>昵称</text>
				<view class="ipt-row">
					<input placeholder="请输入" v-model="userInfo.nickname"/>
					<!-- <image src="../../../static/image/icon_right.png"></image> -->
				</view>
			</view>
			<view>
				<text>手机号</text>
				<view class="ipt-row">
					<input disabled class="grays" placeholder="请输入" v-model="userInfo.mobile" />
				</view>
			</view>
		</view>
		<view class="login-out" hover-class="hover_class" @click="saveInfo">保存信息</view>
		<view class="login-out set-tops" hover-class="hover_class" @click="loginOut">退出登录</view>
	</view>
</template>

<script>
	import {
		userIndex,
		updatePortrait,
		updateNickname
	} from 'utils/api/user.js'
	import {baseUrl} from '@/utils/api/request.js'
	export default {
		data() {
			return {
				userInfo: {}
			}
		},
		onLoad() {
			uni.showShareMenu({
				withShareTicket:true,
				menus:["shareAppMessage","shareTimeline"]
			})
		},
		//分享到朋友圈
		onShareTimeline(res) {
		    return {
		        title: '顺晟新物流',
		        type: 0,
		        summary: "",
		    }
		},
		onShow() {
			this.getData()
		},
		methods: {
			saveInfo() {
				if(!this.userInfo.portrait) {
					return uni.showToast({
						title: '请上传头像',
						icon: 'none'
					})
				}
				if(!this.userInfo.nickname) {
					return uni.showToast({
						title: '请输入昵称',
						icon: 'none'
					})
				}
				uni.showLoading({
					title: '保存中'
				})
				Promise.all([
					updatePortrait({image: this.userInfo.portrait}),
					updateNickname({nickname: this.userInfo.nickname}),
				]).then((res) => {
					setTimeout(() => {
						uni.hideLoading()
						uni.showToast({
							title: '更新成功',
							icon: 'none'
						})
					}, 400)
				}).catch(() => {
					uni.hideLoading()
				})
			},
			uploadFiles() {
				uni.chooseImage({
				  count: 1,
				  sizeType: ['original', 'compressed'],
				  sourceType: ['album', 'camera'],
				  success: (result) => {
					uni.uploadFile({
						url: baseUrl + '/member/app/common/upload', 
						filePath: result.tempFilePaths[0],
						name: 'file',
						success: (res) => {
							if(res.statusCode == 200) {
								const url = res.data ? JSON.parse(res.data.replace('\uFEFF', '')): {};
								this.userInfo.portrait = baseUrl + "/" + url.data
							}
						},
						fail: () => {
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							})
						}
					})
				  }
				});
			},
			getData() {
				uni.showLoading({
					title: '加载中'
				})
				userIndex().then((res) => {
					this.userInfo = res.data
				}).finally(() => {
					setTimeout(() => {
						uni.hideLoading()
					}, 300)
				})
			},
			loginOut() {
				uni.removeStorageSync('token')
				uni.switchTab({
					url: '/pages/home/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.login-out {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80upx;
	color: #fff;
	background-color: #0B59E0;
	font-size: 28upx;
	border-radius: 40upx;
	margin-top: 73upx;
}
.set-tops {
	margin-top: 20upx !important;
}
.ava-box {
	margin-bottom: 64upx;
}
.set-bots {
	margin-bottom: 85upx;
}
.avator {
	width: 80upx;
	height: 80upx;
	border-radius: 50%;
	overflow: hidden;
	>image {
		width: 100%;
		border-radius: 50%;
		height: 100%;
		
	}
}
.pages-row {
	width: 100%;
	min-height: 100vh;
	box-sizing: border-box;
	padding: 30upx 20upx;
	background-color: #F6F6F6;
	>.cardf {
		width: 100%;
		background-color: #fff;
		border-radius: 20upx;
		box-sizing: border-box;
		padding: 29upx 37upx 53upx 36upx;
		>view {
			display: flex;
			align-items: center;
			justify-content: space-between;
			>text{
				font-size: 26upx;
				font-weight: 400;
				color: #000000;
			}
		}
	}
}
.ipt-row {
	display: flex;
	align-items: center;
	flex: 1;
	>input {
		font-size: 26upx;
		color: #000000;
		flex: 1;
		text-align: right;
	}
	>image {
		width: 15upx;
		height: 26upx;
		margin-left: 11upx;
	}
	.grays {
		color: #666 !important;
	}
}
</style>